import GoodsItems from "@/views/Category/TopCategory/components/goodsItem";
import { Fragment, useEffect, useState } from "react";
import "./index.scss";
import { useFindHotGoods } from "@/apis/product";
import { useParams } from "react-router-dom";
function GoodsHot({ type = 1 }: { type?: number }) {
  const titleObj: {
    [prop: number]: string;
  } = { 1: "24小时热销榜", 2: "周热销榜", 3: "总热销榜" };

  const [title, setTitle] = useState("");
  useEffect(() => {
    setTitle(titleObj[type]);
  }, [type]);

  const { id } = useParams();
  const [goods, setGoods] = useState<any[]>([]);
  const { result } = useFindHotGoods(id as string, type, 3);
  useEffect(() => {
    if (result) {
      const zks = result.map((item: any) => {
        item.tag = item.desc;
        return item;
      });
      setGoods(zks);
    }
  }, [result]);
  return (
    <>
      {goods.length > 0 && (
        <div className="goods-hot">
          <h3>{title}</h3>
          {goods?.map((item: any) => (
            <Fragment key={item.id}>
              <GoodsItems goods={item}></GoodsItems>
            </Fragment>
          ))}
        </div>
      )}
    </>
  );
}

export default GoodsHot;
